<template>
  <div class="screen-capturer">
    <h2>屏幕截图</h2>

    <div class="format-selector">
      <label for="formatSelect">图片格式：</label>
      <el-select id="formatSelect" v-model="selectedFormat">
        <el-option value="png">PNG</el-option>
        <el-option value="jpeg">JPEG</el-option>
        <el-option value="webp">WebP</el-option>
      </el-select>
    </div>

    <div class="controls">
      <el-button class="full-screenshot-btn" @click="takeFullScreenshot">
        <i class="icon-full"></i> 全屏截图
      </el-button>

      <el-button class="region-screenshot-btn" @click="takeRegionScreenshot">
        <i class="icon-region"></i> 区域截图
      </el-button>
    </div>

    <div class="status" :class="statusType">
      {{ statusMessage }}
    </div>
  </div>
</template>

<script setup>
// 状态变量
const selectedFormat = ref('png')
const statusMessage = ref('就绪')
const statusType = ref('info')
const isProcessing = ref(false)

// 全屏截图
const takeFullScreenshot = async () => {
  if (isProcessing.value) return

  try {
    isProcessing.value = true
    statusMessage.value = '正在截取全屏...'
    statusType.value = 'processing'

    const result = await window.electronAPI.takeFullScreenshot({
      format: selectedFormat.value
    })

    if (result.success) {
      statusMessage.value = `全屏截图已保存至: ${result.path}`
      statusType.value = 'success'
    } else {
      statusMessage.value = `截图失败: ${result.error}`
      statusType.value = 'error'
    }
  } catch (error) {
    statusMessage.value = `发生错误: ${error.message}`
    statusType.value = 'error'
    console.error('全屏截图错误:', error)
  } finally {
    isProcessing.value = false
  }
}

// 区域截图
const takeRegionScreenshot = async () => {
  if (isProcessing.value) return

  try {
    isProcessing.value = true
    statusMessage.value = '请选择截图区域...'
    statusType.value = 'processing'

    const result = await window.electronAPI.takeRegionScreenshot()
    console.log(result)

    if (result.success) {
      statusMessage.value = `区域截图已保存至: ${result.path}`
      statusType.value = 'success'
    } else {
      statusMessage.value = `截图失败: ${result.error}`
      statusType.value = 'error'
    }
  } catch (error) {
    statusMessage.value = `发生错误: ${error.message}`
    statusType.value = 'error'
    console.error('区域截图错误:', error)
  } finally {
    isProcessing.value = false
  }
}
</script>

<style scoped lang="scss">
.screen-capturer {
  margin-top: 10px;
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #2c3e50;
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.format-selector {
  margin: 1rem 0;

  label {
    display: block;
    margin-bottom: 0.5rem;
    color: #34495e;
    font-weight: 500;
  }

  select {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
  }
}

.controls {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;

  button {
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    flex: 1;
    min-width: 140px;

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    &:not(:disabled):hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .full-screenshot-btn {
    background-color: #3498db;
    color: white;
  }

  .region-screenshot-btn {
    background-color: #9b59b6;
    color: white;
  }

  .icon-full::before {
    content: '🖥️';
  }

  .icon-region::before {
    content: '🔲';
  }
}

.status {
  padding: 0.8rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  font-size: 0.95rem;

  &.info {
    background-color: #ecf0f1;
    color: #34495e;
  }

  &.processing {
    background-color: #e3f2fd;
    color: #1565c0;
  }

  &.success {
    background-color: #e8f5e9;
    color: #2e7d32;
  }

  &.error {
    background-color: #ffebee;
    color: #c62828;
  }
}
</style>
